<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-01 00:06:42
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .road-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        color: #000000d9;
        font-size: 14px;
        margin-bottom: 4px;
    }


    #road-list {
        height: calc(100vh - 280px);
    }

    .total-map {
        height: calc(100vh - 140px);
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="section">
            <div class="solid ">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <div class="p-4">
                            <p class="layui-font-black layui-font-16">道路管理</p>
                            <p class="layui-font-gray layui-font-12">总里程：155.82km</p>
                        </div>
                        <hr class="m-0" />
                        <div class="mt-3 px-4">
                            <div class="layui-input-group  w100">
                                <input type="text" placeholder="请输入名称搜索" class="layui-input" id="searchInput" />
                                <div class="layui-input-split layui-input-suffix anticon" id="searchBtn">
                                    <i class="layui-icon layui-icon-search"></i>
                                </div>
                            </div>
                        </div>
                        <!-- 列表区域 -->
                        <div class="y-scroll m-4" id="road-list"></div>

                    </div>
                    <div class="layui-col-md9">
                        <div class="view-map">
                            <div class="total-map">
                                <!-- 地图信息 -->
                                <div id="totalMapContainer" class="amap-container">
                                </div>
                                <!-- https://lbs.amap.com/demo/javascript-api-v2/example/layers/default -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/

        /******************** 搜索 start ********************/
        $('#searchBtn').on('click', function () {
            var keyword = $('#searchInput').val().trim(); // 去除前后空格
            if (keyword) {
                console.log('搜索关键词:', keyword);
                filterRoadItems(keyword)
                // 执行搜索逻辑
            } else {
                layer.msg('请输入搜索内容');
            }
        });

        function filterRoadItems(keyword) {
            $('#road-list .road-item').each(function () {
                var $item = $(this);
                console.log('$item==', $item)
                var name = $item.find('label').text().toLowerCase();
                if (name.includes(keyword.toLowerCase())) {
                    $item.show();
                } else {
                    $item.hide();
                }
            });
        }
        /******************** 搜索 end ********************/


        // 初始化地图 
        let mapCenter = miniAMap.defaults.mapCenter; // 默认北京中心点
        let map = null
        map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: mapCenter // 默认北京中心点
            }
        })

        //https://lbs.amap.com/api/javascript-api-v2/documentation#maptype
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var type = new AMap.MapType({
                defaultType: 0,// 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0
                showTraffic: false,//叠加实时交通图层 默认值：false
                showRoad: false,//叠加路网图层 默认值：false

            });
            map.addControl(type);
        });

        setAmapPolygon()

        //获取左侧列表数据
        function setAmapPolygon() {

            $.getJSON("api/road.json", function (json) {
                console.log('json==', json)
                if (json.code === 0) {
                    renderRoad(json.data);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
            $.getJSON("api/roadList.json", function (json) {
                console.log('json==', json)
                if (json.code === 0) {
                    renderGridCheck(json.data);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
        }
        // 存储原始线路对象
        let originalPolyline = null;
        //1、 加载原始线路数据
        function renderRoad(data) {
            const color = data.color || '#c7c7cb';
            mapCenter = [data.longitude, data.latitude]
            const points = data.scopePoints; // 解析 lineScope 为数组
            //重置中心 根据实际需求处理
            map.setCenter(mapCenter); // 仅设置中心
            originalPolyline = miniAMap.createPolyline(points, {
                color: color
            });
            map.add(originalPolyline);
        }


        // 存储多边形对象
        const polygonObjects = {};
        //当前选中
        const polygonCurObj = {};
        function renderGridCheck(data) {
            const container = $('#road-list');
            container.empty(); // 清空旧元素

            data.forEach(item => {
                const color = '#0080FF';
                const points = item.lineScope; // 解析 lineScope 为数组
                const checkboxId = `grid_${item.id}`;
                const checkboxHtml = `

                <div class="road-item" id="${checkboxId}">
                                <label>${item.lineName}</label>
                            </div>

                            
                `;
                container.append(checkboxHtml);
                const polygon = miniAMap.createPolyline(points, {
                    color: color
                });
                polygonObjects[checkboxId] = polygon;
                polygonCurObj[checkboxId] = item;
                // 绑定点击事件
                $(`#${checkboxId}`).on('click', function () {
                    $(this).toggleClass('selected');
                    const isSelected = $(this).hasClass('selected');
                    if (isSelected) {
                        mapCenter = points[0]
                        //重置中心 根据实际需求处理
                        map.setCenter(mapCenter); // 仅设置中心
                        // 重新添加原始线路
                        if (originalPolyline) {
                            map.add(originalPolyline);
                        }
                        map.add(polygon);

                    } else {
                        map.remove(polygon);
                    }
                    // 单选模式：只保留当前选中项
                    if (!$(this).hasClass('multi-select')) {
                        $(`.road-item`).not(this).removeClass('selected');
                        $(`.road-item`).not(this).each(function () {
                            const otherId = $(this).attr('id');
                            const otherPolygon = polygonObjects[otherId];
                            if (otherPolygon) {
                                map.remove(otherPolygon);
                            }
                        });
                    }
                });
            });
        }





        // 缓存图层实例
        const standardLayer = new AMap.TileLayer();
        const satelliteLayer = new AMap.TileLayer.Satellite();

        // 切换基础图层（标准 / 卫星）
        $('input[name="layer-base-item"]').on('change', function () {
            if ($(this).is(':checked')) {
                const layerId = $(this).data('id');
                map.setFeatures([]);
                // 重新添加原始线路
                if (originalPolyline) {
                    map.add(originalPolyline);
                }
                if (layerId === 'AMap.TileLayer') {
                    // map.add(standardLayer);
                    var selectedCardId = $('.road-item.selected').attr('id');
                    //重置中心 根据实际需求处理
                    map.setCenter(mapCenter); // 仅设置中心

                    map.add(polygonObjects[selectedCardId]);
                } else if (layerId === 'AMap.TileLayer.Satellite') {
                    map.add(satelliteLayer);
                }
            }
        });

    })
</script>